<template>
	<view class="parking">
		<!-- 车辆缴费 -->
		<view class="content" :style="cuindex == 0 ? ' display:black' : ' display: none'">
			<view class="banner">
				<image src="https://img.shihhl.com/shequ/tc.png" mode="widthFix"></image>
			</view>
			<view class="title">请您输入车牌</view>
			<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			<view class="btn" @click="CheckParking()">查询停车费</view>
			<view class="describe" @click="ParKingRules()">
				<image src="/static/home/sms.png" mode="widthFix"></image>
				缴费说明
			</view>
		</view>
	<!-- 我的车辆 -->
		<view class="myche" :style="cuindex == 1 ? ' display:black' : ' display: none'">
			<view class="my_itme" v-for="(itme,index) in UserCarlist" :key="itme.id">
				<view class="left">{{itme.platePrefix}} · {{itme.plateSuffix}}</view>
				<view class="right">
					<view @click="CheckParking(itme.plateNo)">去缴费</view>
					<view @click="Unbind(index,itme.id)">解绑</view>
				</view>
			</view>
			<view class="add" @click="AddCour">
				<image src="/static/home/add.png" mode="widthFix"></image>添加新车辆
			</view>
		</view>
		<!-- 添加车辆 -->
		<view class="operation">
			<view class="op_itme" v-for="(itme,index) in chebox" :key="index" @click="Selce(index)">
				<view class="img">
					<image :src="cuindex == index ? '/static/home/ckb' + ( index + 1) +  '.png' : '/static/home/kb' + ( index + 1) +  '.png'" mode="widthFix"></image>
				</view>
				<view class="name" :style="cuindex == index ? 'color:#F26B2E' : 'color:#9A9A9A'">{{itme.name}}</view>
			</view>
		</view>
		<u-popup v-model="pu_show" mode="center" border-radius="20">
			<view class="u_imgs">
				<image src="https://img.shihhl.com/shequ/tc.jpg" mode="widthFix"></image>
			</view>
		</u-popup>
		<Butogin :zheshow='zheshow' @colse="(e)=> zheshow = false"/>
	</view>
</template>

<script>
	// import carNumberInput from '@/components/car-number-input'
	import { mapState } from 'vuex';
	import carNumberInput from '@/components/car-number-input/car-number-input.vue'
	import { userCar , userCarpage  , userCarcarParkFee , DelluserCar , adduserCar } from '@/core/api/index.js'
	export default{
		components:{
			carNumberInput
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		data(){
			return{
				defaultNum:'沪A',
				show:true,
				pu_show:false,
				plist:['沪','','','','','','',''],
				plateNo:'',
				cuindex:0,
				UserCarlist:[],
				zheshow:false,
				chebox:[
					{
						name:'车牌缴费'
					},
					{
						name:'我的车辆'
					},
					{
						name:'缴费记录'
					}
				]
			}
		},
		onLoad() {
			// this.UserCar()
		},
		onShow() {
			this.UserCarpage()
		},
		methods:{
			ParKingRules(){
				uni.navigateTo({
					url:'/pages/home/Parking_rules'
				})
			},
			AddCour(){
				if(!this.userInfo.phone){
					  console.log('需要登录')
					  this.zheshow = true
					  return
				}
				uni.navigateTo({
					url:'/pages/home/vehicle'
				})
			},
			numberInputResult(e){
				console.log('结果--'+e)
				this.plateNo = e
			},
			async Unbind(index,id){
				uni.showModal({
					title: '提示',
					content: '确定解绑当前车辆吗?',
					success: async (res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = await DelluserCar(id)
							if(data.code == '00000'){
								uni.showToast({
									title:'解绑成功'
								})
								this.UserCarlist.splice(index,1)
							}else{
								uni.showToast({
									title:data.message,
									icon:'none'
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async UserCar(){
				let parme = {
					plateNo:'沪A45986'
				}
				const res = await userCar(parme)
				console.log(res)
			},
			async UserCarpage(){
				console.log(11)
				let prames = {
					page:1,
					size:50
				}
				const { data } = await userCarpage(prames)
			    console.log(data.records)
				this.UserCarlist = data.records
			 },
			 async CheckParking(plateNo){
				   // console.log(str.length)
				   // 2. 检查长度是否为8
				   // if(!this.userInfo.phone){
					  // console.log('需要登录')
					  // this.zheshow = true
					  // return
				   // }
				   if(plateNo){
				   		this.plateNo = plateNo
				   }
				   const str = String(this.plateNo).trim();
				   if (str.length < 6){
					   uni.showToast({
					   	 title:'请输入车牌号',
						 icon:'none'
					   })
					   return
				   } 
				 // if(this.plateNo.length > 6){
					//  uni.showToast({
					//  	title:'请输入车牌号',
					// 	icon:'none'
					//  })
					//  return
				 // }
				uni.showLoading({
					title:'查询中...'
				})
				const reows = await userCarcarParkFee(this.plateNo)
				if(reows.code == '00000'){
				   setTimeout(()=>{
				   	uni.hideLoading()
				   	uni.navigateTo({
				   		url:'/pages/home/parking_payment?data=' + encodeURIComponent(JSON.stringify(reows.data))
				   	})
				   },1000)	
				   if(!plateNo){
					  adduserCar({plateNo:this.plateNo})   
				   }
				}else{
					uni.showToast({
						title:reows.message,
						icon:'none'
					})
				}
				// console.log(data,'--')
			},
			Selce(index){
				console.log(index)
				uni.showLoading({
					title:'加载中...'
				})
				if(index == 2){
					if(!this.userInfo.phone){
						  console.log('需要登录')
						  this.zheshow = true
						  return
					}
					uni.navigateTo({
						url:'/pages/home/parkingrecord'
					})
					this.cuindex = 0
					uni.hideLoading()
					return
				}
				this.cuindex = index
				uni.setNavigationBarTitle({
				  title: this.chebox[index].name
				});
				setTimeout(()=>{
					uni.hideLoading()
				},1000)
			}
		}
	}
</script>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.parking{
		.u_imgs{
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.content{
			background-color: #fff;
			padding-bottom: 80rpx;
		}
		.banner{
			width: 100%;
			image{
				width: 100%;
			}
		}
		.title{
			padding: 50rpx 40rpx 20rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #969696;
		}
		.plist{
			display: flex;
			padding:  0 22rpx;
			justify-content: space-between;
			.conet{
				width: 72rpx;
				height: 80rpx;
				background: #F0EFED;
				border-radius: 10rpx;
			}
		}
		.btn{
			background: #F26B2E;
			margin:  60rpx 32rpx;
			// width: 100%;
			height: 80rpx;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 60rpx;

		}
		.describe{
			width: 160rpx;
			height: 60rpx;
			border-radius: 40rpx;
			border: 1px solid #E8E8E8;
            color: #6BC7C3;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			image{
				width: 26rpx;
				height: auto;
				margin-right: 6rpx;
			}
		}
		.operation{
			height: 172rpx;
			background-color: #fff;
			border-radius: 160rpx;
			padding: 0 80rpx;
			// margin:  120rpx 22rpx;
			filter: drop-shadow(0px -4px 14px rgba(0, 0, 0, 0.06)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.06));
			display: flex;
			align-items: center;
			    justify-content: space-between;
				bottom: 10%;
				    position: fixed;
				    width: 91%;
				    left: 50%;
				    transform: translate(-50%, -50%);
			.op_itme{
				display: flex;
				flex-direction: column;
				align-items: center;
				.img{
					width: 60rpx;
					// height:  auto;
					image{
						width: 60rpx;
					}
				}
				.name{
					font-size: 26rpx;
				}
			}
		}
		.myche{
			background-color: #fff;
			margin: 20rpx 20rpx;
			border-radius: 20rpx;
			min-height: 600rpx;
			padding: 40rpx 0;
			.my_itme{
				width: 95%;
				height: 140rpx;
				padding: 0 20rpx;
				margin: 0 auto 20rpx;
				display: flex;
				align-items: center;
				background-color: #EFF7FB;
				justify-content: space-between;
				border-radius: 12rpx;
				.left{
					font-size: 40rpx;
					font-weight: 500;
					color: #000;
				}
				.right{
					display: flex;
					padding-right: 10rpx;
					view:nth-child(1){
						background-color: #F26B2E;
						width: 108rpx;
						height: 48rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 47rpx;
						color: #fff;
						font-size: 24rpx;
						margin-right: 20rpx;
					}
					view:nth-child(2){
						border: 1px solid #6D8893;
						width: 88rpx;
						height: 44rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 42rpx;
						color: #6D8893;
						// color: #fff;
						font-size: 24rpx;
					}
				}
			}
			.add{
				color: #F26B2E;
				font-size: 36rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 80rpx auto;
				image{
					width: 30rpx;
					margin-right: 10rpx;
					height: auto;
				}
			}
		}
	}
</style>